<template>
    <div class="title">
        <div class="nav">
            <i class="el-icon-arrow-left" @click='back'></i>
            <span>穷游锦囊</span>
            <i class="el-icon-s-fold" @click='playshow'></i>
        </div>
        <ul v-if='play'>
                <li>
                    <p>登陆后享受更多穷游服务</p>
                    <input type="button" value="登陆">
                </li>
                <li>

                        <img src="../../assets/guide/nav_home.png">
                        <span>首页</span>

                </li>
                <li>
                    <img src="../../assets/guide/nav_place.png">
                    <span>目的地</span>
                </li>
                <li>
                    <img src="../../assets/guide/nav_plan.png">
                    <span>行程助手</span>
                </li>
                <li>
                    <img src="../../assets/guide/nav_lm.png">
                    <span>折扣</span>
                </li>
                <li>
                    <img src="../../assets/guide/nav_ask.png">
                    <span>问答</span>
                </li>
                <li>
                    <img src="../../assets/guide/nav_bbs.png">
                    <span>论坛</span>
                </li>
                <li>
                    <img src="../../assets/guide/nav_hotel.png">
                    <span>酒店</span>
                </li>
                <li>
                    <img src="../../assets/guide/nav_flight.png">
                    <span>机票</span>
                </li>
                <li>
                    <img src="../../assets/guide/nav_app.png">
                    <span>APP</span>
                </li>
                <li>
                    <img src="../../assets/guide/nav_comment.png">
                    <span>写点评</span>
                </li>
                <li>
                    <img src="../../assets/guide/nav_question.png">
                    <span>提问题</span>
                </li>
            </ul>
        <div class="bgc" v-if='play' @click='playshow'></div>
        <div class="search">
            <input type="text" placeholder="搜索你想要的锦囊">
        </div>

    </div>
</template>


<script type="text/javascript">
    export default {
        name:'GuideHeader',
        data(){
            return {
                play:false,
            }
        },
        methods:{
            back(){
                this.$router.push({
                    name:'HelloWorld',
                })
            },
            playshow(){
                this.play=!this.play
            }
        }
    }
</script>

<style type="text/css" scoped lang="less">
*{
    margin: 0;
    padding: 0;
}
.title{
    position: relative;
    .bgc{
        width: 100vw;
        height: 100vh;
        position: absolute;
        top:0;
        left:0;
        background-color: rgba(0,0,0,0.6);
        z-index: 99;
    }

    ul{
        width: 60%;
        position: absolute;
        top:2em;
        right:0;
        list-style-type: none;
        background-color: #fff;
        z-index: 100;
        li:first-child{
            background-color: #d7d7d7;
            text-align:center;
            p{
                color:#636363;
                font-size: 12px;
            }
            input{
                width: 179px;
                height: 30px;
                border-radius: 5px;
                background-color: #60a673;
                font-size: 15px;
                line-height: 30px;
                color: #fff;
            }
        }
        li{
            padding: 1em 0;
            border-bottom: 1px solid #e4e4e7;

               img{
                    width: 1.5em;
                    padding:0 1em;
                    border-radius:50%
                }
                span{
                    color: #323232
                }


        }
    }

    .nav{
        height: 2em;
        line-height: 2em;
        text-align: center;
        background-color: black;
        color:white;
        i:first-child{
            float: left;
            line-height: 2em;
            margin-left: 0.8em;
        }
        i:last-child{
            float:right;
            line-height: 2em;
            margin-right: 0.8em;
        }
    }
    .search{

        text-align:center;
        background-color:#ecece5;
        input{
            margin:1em 0;
            text-indent: 3em;
            width: 90%;
            height: 2em;
            background-image: url(../../assets/guide/搜索.svg);
            background-repeat: no-repeat;
            background-position: left 0.5em center;
            background-size: contain;
            border:1px solid transparent;
        }
    }
}


</style>
